<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Drag & Drop with HTML5, jQuery and jQuery UI</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" href="jquery-ui-themes-1.11.2/themes/ui-lightness/jquery-ui.css">
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="jquery-ui-themes-1.11.2/jquery-ui-1.11.2.js"></script>
        <script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
        <script type="text/javascript" src="js/ckeditor/adapters/jquery.js"></script>
        <script type="text/javascript" src="js/wrap.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#before-contrainer").css("min-height", $(".toolbar").height());
                $("#sortable").sortable();

                CKEDITOR.on('instanceCreated', function (event) {
                    var editor = event.editor,
                            element = editor.element;

                    if (element.getAttribute('class').indexOf("text") !== -1) {
                        editor.on('configLoaded', function () {
                            editor.config.toolbar = [
                                {name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt']},
                                {name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
                                {name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']},
                                '/',
                                {name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize']},
                                {name: 'colors', items: ['TextColor']},
                                {name: 'links', items: ['Link', 'Unlink']},
                                {name: 'insert', items: ['Table', 'HorizontalRule', 'SpecialChar', 'PageBreak']}
                            ];
                        });
                    }
                });

                var dialog = $("#youtube-form").dialog({
                    autoOpen: false,
                    height: 180,
                    width: 500,
                    modal: true,
                    buttons: {
                        "Submit": function () {
                            dialog.dialog("close");
                        },
                        Cancel: function () {
                            dialog.dialog("close");
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dialog"></div>
        <div id="youtube-form" title="Add new youtube">
            <form>
                <label for="youtube-link">Youtube link</label><br />
                <input type="text" name="youtube-link" id="youtube-link" placeholder="https://www.youtube.com/watch?v=YhjR1oQkEws" style="width: 400px" />
                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </form>
        </div>
        <div class="top-box shadow">TOP</div>
        <div class="bottom-box shadow">BOT</div>

        <article class="toolbar">
            <header>
                <h1>Review box by Edward Melody</h1>
            </header>
            <section class="menu">
                <nav>
                    <ul>
                        <li>
                            <select id="selectType">
                                <option value="1">Text</option>
                                <option value="2">image</option>
                                <option value="3">Image left / Text right</option>
                                <option value="4">Text left / Image right</option>
                                <option value="5">Image both</option>
                            </select>
                        </li>
                        <li>
                            <button id="buttonAdd">Add</button>
                        </li>
                        <li>
                            <button id="buttonReset">Reset</button>
                        </li>
                        <li>
                            <button id="buttonPreview">Preview</button>
                        </li>
                    </ul>
                </nav>
            </section>
        </article>
        <div id="before-contrainer"></div>
        <article class="contrainer">
            <section class="content-box">
                <article id="sortable">
                </article>
            </section>
        </article>
        <div style="clear:both;"></div>
    </body>
</html>
